<template>
	<view class="index">
		<!-- 轮播 -->
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item, index) in banners" :key="index">
				<view class="swiper-item">
					<image :src="item.image" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- 列表 -->
		<view class="list">
			<list-item v-for="(item, index) in list" :key="index" :item="item" @click="toDetail(item)"></list-item>
		</view>
		
		<view v-show="show" class="dialog">
			<view class="content">
				<view>
					<text @click="close">X</text>
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	const db = uniCloud.database()
	export default {
		data() {
			return {
				banners: [],
				list: [],
				show: true
			}
		},
		methods: {
			async getBanners() {
				const resp = await db.collection('banner').get()
				this.banners = resp.result.data;
			},
			async getList() {
				// const resp = await db.collection('list').get();
				// const resp = await uniCloud.callFunction({
				// 	name: 'fetch_list'
				// })
				// this.list = resp.result.data
				
				uni.request({
					url: 'https://fc-mp-bb37243e-7b26-41a3-9371-0d2bbb027341.next.bspapp.com'
				})
			},
			toDetail(item) {
				uni.navigateTo({
					url: `/pages/detail/detail?id=${item._id}&title=${item.title}`
				})
			},
			close() {
				this.show = false
			}
		},
		onLoad() {
			this.getBanners();
			this.getList();
			
			setTimeout(() => {
				this.close()
			}, 3 * 1000)
		}
	}
</script>

<style scoped lang="scss">
	.swiper {
		width: 100%;
		height: 400rpx;

		image {
			width: 100%;
			height: 400rpx;
		}
	}
	
	.list {
		
	}
	
	.dialog {
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, .6);
		position: fixed;
		left: 0%;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		.content {
			width: 80vw;
			height: 400px;
			border-radius: 20px;
			background-color: white;
			padding: 20px;
		}
	}
</style>